<template>
    <div class="commonMenu">
        <span class="myUser">我的常用</span>
        <vue-scroll :ops="ops">
            <div class="menu">
                <ul class="userUl">
                    <li v-for="(itemOne) in menuCollect" :key="itemOne.id" @click="openMenu(itemOne)">
                        <i :class="`icon iconfont ${iconList[Math.floor(Math.random(0,1)*10) ]}`"></i>
                        <span>{{itemOne.name}}</span>
                        <i class="remove-icon el-icon-close" title="" @click.stop="delPermission(itemOne)"></i>
                    </li>
                </ul>
            </div>
        </vue-scroll>
        <p class="rightCon">常用功能可以在菜单设置中添加</p>
    </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
const { mapMutations: mapTagMutations } = createNamespacedHelpers('tagModule');
const { mapState, mapMutations,mapActions } = createNamespacedHelpers('homeModule');
export default {
    name: 'CommonMenu',
    data () {
        return {
            ops: {
                rail: {
                    opacity: '0',
                },
                bar: {
                    onlyShowBarOnScroll: false,
                    background: '#c6c6c6',
                    size: '3px',
                    right:0
                },
                scrollPanel: {
                    
                    // 是否禁止x或y方向上的滚动
                    scrollingX: false,
                    scrollingY: true,
                },
            },
            iconList:['icon-changyongbaobiao1','icon-zhibiaoshouhui','icon-zhibiaoduizhang','icon-zhibiaoluru','icon-wenjuantiaochaluru','icon-disanfangjigou','icon-baobiaoluru_A','icon-piliangshenhe_A','icon-gongzuohuanjingpeizhi','icon-icon-test5']
        };
    },
    computed:{
        ...mapState({
            menuCollect:state => state.menuCollect
        })
    },
    created(){
        this.getPermission();
    },
    methods: {
        ...mapMutations([]),
        ...mapActions(['getMenuColloectAsync','delMenuColloectAsync']),
        ...mapTagMutations(['addTag']),
        // 加入收藏
        getPermission(){
            this.getMenuColloectAsync();
        },
        // 移除收藏
        delPermission(item){
            // console.log(this.delMenuColloectAsync('ef36d448-fc6a-49ce-a22f-2d4e3dceec52'));
            this.delMenuColloectAsync(item.id).then((res) => {
                if(res.data.code=== -1){
                    this.$message.error('移除失败');
                }else{
                    this.$message.success('移除成功');
                    this.getMenuColloectAsync();
                }
            });
        },
        // 打开菜单
        openMenu (menu) {
            if (!menu.url || menu.url === '') {
                return;
            }
            // 打开方式
            if (menu.isNew) {
                window.open(menu.url);
            } else if (menu.isBuiltin) {
                // 内置页面
                this.addTag(menu);
            } else {
                this.addTag(menu);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.commonMenu{
    width: 100%;
    height: 49px;
    line-height: 49px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 5px 10px #ddd;
    border-bottom: 1px solid #ddd;
    font-size: 12px;
    color: #333333;
    position: relative;
    display: flex;
    .myUser{
        font-weight: 600;
        margin-left: 20px;
        width: 58px;
    }
    .menu{
        flex: 1;
    }
    .userUl{
        display: inline-block;
        li{
            display: inline-block;
            margin-left: 20px;
            position: relative;
            cursor: pointer;
            .icon{
                display: inline-block;
                width: 24px;
                height: 24px;
                line-height: 24px;
                text-align: center;
                background: #0099FF;
                border-radius: 4px;
                margin-right: 8px;
                color: #fff;
                font-size: 12px;
            }
            .remove-icon{
                position: absolute;
                right: -8;
                top: 6px;
                opacity: 0;
            }
        }
        li:hover{
            .remove-icon{
                opacity: 1;
            }
        }
    }
    .rightCon{
        float: right;
        color: #FA6400;
        font-size: 12px;
        margin-right: 20px;
    }
}
</style>
